<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10"> 
        <!-- 权益管理 -->
        <span style="color: #999"></span>{{ title }}
      </p>
      <div class="content">
        <el-form label-width="80px" class="forms" v-show="xi == 2">
          <div class="basicInfo2">基本信息</div>
          <div class="basicInfo1">
            <el-form-item
              label="业务类型"
              style="float: left; margin-left: 10px;"
            >
              <el-select
                :disabled="disabled1"
                @change="bussTypeChange"
                v-model="list.busUid"
                placeholder="请选择业务类型"
              >
                <el-option
                  v-for="items in bussinessType"
                  :key="items.uid"
                  :label="items.busName"
                  :value="items.uid"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="业务品牌">
              <el-select @change="brandChange" :disabled="disabled1" v-model="list.channelUid" placeholder="请选择业务品牌">
                <el-option
                  v-for="item in vipTypeOptions"
                  :key="item.uid"
                  :label="item.channelName"
                  :value="item.uid">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="结算方式"
              style="float: left; margin-left: 10px"
            >
              <el-select :disabled="disabled1" v-model="list.settleType" placeholder="请选择结算方式">
                <el-option
                  v-for="item1 in jsType"
                  :key="item1.value"
                  :label="item1.label"
                  :value="item1.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="计算方式"
              style="float: left; margin-left: 10px"
            >
              <el-select  :disabled="disabled || disabledBool" v-model="list.calcType" placeholder="请选择计算方式">
                <el-option
                  v-for="items in js1Type"
                  :key="items.value"
                  :label="items.label"
                  :value="items.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div class="grade">
          <div class="basicInfo">成本配置</div>
          <div class="title_con">
            <div class="sj" style="float: left;padding-left: 32px;" >
              <div class="title_son">序号</div>
              <div class="title_son1">规则设置</div>
              <div class="title_son1" style="width:350px;height:49px"></div>
              <div class="title_son1" style="width:240px;height:49px">成本金额<div v-if="list.calcType=='0' || list.calcType=='1'">（%）</div>
              <div v-else>（元）</div></div>
              <div class="title_son2" v-if="type != 2">操作</div>
            </div>
            <div
              style="width: 100%;position: relative; float: left; display:flex; margin-left:10px;padding-left:20px; padding-top:20px;padding-bottom:20px; min-height: 60px; border-top: 2px solid #EBEEF5"
              v-for="(v, s) in list.busRuleCostCfgList"
              :key="s"
            >
              <div class="title_son">{{ s + 1 }}</div>
              <div class="lists">
                <div
                  class="list"
                  v-for="(vals, ins) in v.busRuleValList"
                  :id="ins != 0 ? 'active' : ''"
                  :key="ins"
                >
                  <!--规则-->
                  <div class="title_son1" style="display:flex">
                    <el-select
                     :disabled="disabled || disabledBool"
                      @change="ruleChange(vals.ruleUid, s, ins)"
                      v-model="vals.ruleUid">
                      <el-option
                        v-for="item2 in options"
                        :key="item2.uid"
                        :label="item2.ruleName"
                        :value="item2.uid"
                      ></el-option>
                    </el-select>
                    
                  </div>
                  <!--规则值-->
                  <div class="title_son1" style="width:340px;height:49px">
                    <!-- {{vals.options}} -->
                    <el-select @change="$forceUpdate();" :disabled="disabled || disabledBool" v-if="vals.isCfg == 0" v-model="vals.cfgValue">
                      <el-option
                        v-for="item3 in vals.options"
                        :key="item3.cfgValue"
                        :label="item3.cfgName"
                        :value="item3.cfgValue"
                        
                      ></el-option>
                    </el-select>
                    <el-select v-if="vals.isCfg == 2">
                    </el-select>
                    <el-input
                      v-if="vals.isCfg == 1"
                      :disabled="disabled || disabledBool"
                      class="inputs"
                      type="Number"
                      @input="value=>{vals.startValue=value.replace(/[^\d]+/g,'').replace(/^0{1,}/g, '')}"
                      v-model="vals.startValue"
                    ></el-input>
                    <span v-if="vals.isCfg == 1">-</span>
                    <el-input
                      v-if="vals.isCfg == 1"
                      placeholder="空值最大"
                      maxlength="10"
                      @input="value=>{vals.endValue=value.replace(/[^\d]+/g,'').replace(/^0{1,}/g, '')}"
                      class="inputs"
                      :disabled="disabled || disabledBool"
                      v-model="vals.endValue"
                    ></el-input>
                    <div
                      class="add"
                      style="margin-left:5px"
                      v-if="ins == 0 && type != 2"
                      @click="adds1(v)"
                    >
                      +添加规则
                    </div>
                    <div
                      style="margin-left:5px"
                      @click="dels1(s, ins)"
                      v-if="ins  != 0 && type != 2"
                    >
                      <img src="../../assets/images/del.png" />
                    </div>
                  </div>

                  <!---->
                </div>
              </div>

              <!-- <div style="clear:both"></div> -->
              <div style="display:flex; align-items: center;">
                <div >
                  <!--金额-->
                  <div style="width:240px;height:49px" class="title_son1" >
                    <el-input
                    class="inputs1"
                      :disabled="disabled || disabledBool"
                      v-model="v.costValue"
                      @input="value=>{v.costValue=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
                    ></el-input>
                  </div>
                  <div class="title_son2" v-if="disabled != true">
                    <div class="add" v-if="s == 0" @click="adds(v)">
                      + 添加
                    </div>
                    <div @click="dels(s)" v-else>
                      <img src="../../assets/images/del.png" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="float: left; width:100%">
            <el-button style="margin-left: 40%" @click="cancel()" v-if="disabledBool==false"
              >取消</el-button
            >
            <el-button style="margin-left: 40%" @click="cancels()" v-if="disabledBool==true"
              >取消</el-button
            >
            <el-button type="primary" style="margin-left: 10px" :disabled="disabledBool" @click="cancel5"
              >完成</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import https from "../../plugins/https.js";
export default {
  name: "route",
  data() {
    return {
      disabled1:false,
      disabled:false,
      xi: 2,
      value: "",
      disabledBool:false,
      list: {
        channelUid:this.$route.query.channelUid,
        oemUid:this.$route.query.oemUid?this.$route.query.oemUid:"",
        channelUid: "",
        busUid: "",
        settleType:"",
        calcType:"",
        busRuleCostCfgList: [
          {
            costValue: "",
            busRuleValList: [{ ruleUid: "",cfgValue:"",startValue:"",endValue:"", isCfg: 2,options:[] }]
          }
          // {}
        ]
      },
      js1Type: [],
      options: [],
      title:this.$route.query.title,
      vipTypeOptions: [],
      bussinessType: [],
      jsType: [],
      option: [
        {
          value: "0",
          label: "卡等级"
        },
        {
          value: "1",
          label: "卡状态"
        },
        {
          value: "2",
          label: "发卡量"
        }
      ],
      option1: [
        {
          value: "0",
          label: "初审"
        },
        {
          value: "1",
          label: "下卡"
        },
        {
          value: "2",
          label: "激活"
        },
        {
          value: "3",
          label: "首刷"
        }
      ]
    };
  },
  created() {
    if(this.$route.query.disabled&&this.$route.query.disabled=="0001"){
      this.disabledBool = true
    }


    https
      .getAllBusInfo({ status: "0" })
      .then(res => {
        console.log(res);
        this.bussinessType = res.data.data;
      })
      .catch(err => {});
    https
      .queryDictLists({ type: "settle_type" })
      .then(res => {
        this.jsType = res.data.data;
      })
      .catch(err => {});
    https
      .queryDictLists({ type: "calc_type" })
      .then(res => {
        this.js1Type = res.data.data;
      })
      .catch(err => {});
      if(this.$route.query.channelUid){
        this.disPlays()
      }
      if(this.$route.query.oemUid && this.$route.query.channelUid && !this.$route.query.type){
        this.disabled=true
        this.disabled1=true
      }
      if(this.$route.query.channelUid){
        this.disabled1=true
      }
  },
  mounted: function() {},
  components: {},

  methods: {
    // 回到我的信息
    cancels(){
      this.$router.push({
        name:"meMessage",
        query:{
          types:"four"
        }
      })
    },
    // 回显
    async disPlays(){
      await https.getBusRuleCost({channelUid:this.$route.query.channelUid,oemUid:this.$route.query.oemUid,busUid:this.$route.query.busUid}).then(res=>{
        console.log(res)
        if(res.data.code=="0000"){
          this.list=res.data.data
          this.bussTypeChange(res.data.data.busUid)
          this.brandChange(res.data.data.channelUid)
          if(res.data.data.busRuleCostCfgList.length==0){
          this.list.busRuleCostCfgList= [{
            costValue: "",
            busRuleValList: [{ value: "",cfgValue:"", isCfg: 2,options:[] }] }]
          }
          for(let y=0; y<this.list.busRuleCostCfgList.length; y++){
            for(let n=0; n<this.list.busRuleCostCfgList[y].busRuleValList.length;n++){
              https.getBusRuleCfg({ruleUid:this.list.busRuleCostCfgList[y].busRuleValList[n].ruleUid}).then(res=>{
                this.list.busRuleCostCfgList[y].busRuleValList[n].options = res.data.data;
                
              })
            }
          }
        }else{
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //2秒后自动关闭
          });
        }
      })
    },
    // 业务类型改变
    bussTypeChange(val) {
      console.log(val);
      https
        .getBusChannel({ busUid: val })
        .then(res => {
          this.vipTypeOptions = res.data.data;
        })
        .catch(err => {});
        // if(this.$route.query.oemUid){
        //   https.getBusRule({ busUid: val, costFlag: "0" }).then(res => {
        //     this.options = res.data.data;
        //   }).catch(err => {});
        // }
     
    },
    // 品牌改变
    brandChange(val){
      // 规则
      https.getBusRule({ channelUid: val, costFlag: "0",flag:this.$route.query.flag }).then(res => {
          this.options = res.data.data;
        }).catch(err => {});
    },
    // 规则改变
    ruleChange(val, i, l) {
      // debugger
      if(l<this.list.busRuleCostCfgList[i].busRuleValList.length-1){
        this.list.busRuleCostCfgList[i].busRuleValList[l].ruleUid=""
        for(var w=0;w<this.list.busRuleCostCfgList[i].busRuleValList.length;w++){
          if(val==this.list.busRuleCostCfgList[i].busRuleValList[w].ruleUid){
            this.list.busRuleCostCfgList[i].busRuleValList[l].ruleUid=""
            layer.open({
                content: "该组成本规则已存在",
                skin: "msg",
                time:  2 //2秒后自动关闭
              })
              this.list.busRuleCostCfgList[i].busRuleValList[l].cfgValue=""
              this.list.busRuleCostCfgList[i].busRuleValList[l].options=[]
              return false
          }else{
            this.list.busRuleCostCfgList[i].busRuleValList[l].ruleUid=val
          }
        }
      }else{
      for(var w=0;w<this.list.busRuleCostCfgList[i].busRuleValList.length-1;w++){
        if(val==this.list.busRuleCostCfgList[i].busRuleValList[w].ruleUid){
          this.list.busRuleCostCfgList[i].busRuleValList[l].ruleUid=""
          layer.open({
              content: "该组成本规则已存在",
              skin: "msg",
              time:  2 //2秒后自动关闭
            })
            return false
        }}
      }
      let option3;
      https
        .getBusRuleCfg({ ruleUid: val })
        .then(res => {
          // debugger
          this.option = res.data.data;
          option3 = res.data.data;
          console.log(this.list.busRuleCostCfgList[i].busRuleValList[l])
          this.list.busRuleCostCfgList[i].busRuleValList[l].options = option3;
          this.list.busRuleCostCfgList[i].busRuleValList[l].cfgValue=""   
          
        })
        .catch(err => {});
      for (let m = 0; m < this.options.length; m++) {
        if (this.options[m].uid == val) {
          this.list.busRuleCostCfgList[i].busRuleValList[l].isCfg = this.options[m].isCfg;
        }
      }
    },
    adds(i) {
      this.list.busRuleCostCfgList.push({
        costValue: "",
        busRuleValList: [{ ruleUid: "",cfgValue:"", isCfg: 2,options:[] }]
      });
    },
    dels(i) {
      this.list.busRuleCostCfgList.splice(i, 1);
    },
    adds1(i) {
      if(i.busRuleValList[i.busRuleValList.length-1].ruleUid==''){
        layer.open({
              content: "规则不能为空",
              skin: "msg",
              time:  2 //2秒后自动关闭
            })
            return false
      }
      i.busRuleValList.push({
        ruleUid: "",
        isCfg: 2,
        cfgValue:"",
        options:[]
      });
    },
    dels1(i, l) {
      console.log(i, l);
      this.list.busRuleCostCfgList[i].busRuleValList.splice(l, 1);
    },
    cancel5() {
      for(let y=0; y<this.list.busRuleCostCfgList.length; y++){
        for(let n=0; n<this.list.busRuleCostCfgList[y].busRuleValList.length;n++){
          if( this.list.calcType ==""
          ){
            layer.open({
              content: "计算方式不能为空",
              skin: "msg",
              time:  2 //2秒后自动关闭
            })
            return false
          }else if(this.list.busRuleCostCfgList[y].busRuleValList[n].ruleUid==""){
              layer.open({
              content: "规则不能为空",
              skin: "msg",
              time:  2 //2秒后自动关闭
            })
            return false
          }else if(this.list.busRuleCostCfgList[y].costValue=="" ){
              layer.open({
              content: "金额不能为空不能为空",
              skin: "msg",
              time:  2 //2秒后自动关闭
            })
            return false
          }
        }
      }
      if(this.list.isUpdate){
        https.updateBusRuleCost(this.list).then(res => {
          if (res.data.code == "0000") {
            this.$router.go(-1);
          }else{
            layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //2秒后自动关闭
          });
          }
        });
      }else{
        https.saveBusRuleCost(this.list).then(res => {
          console.log;
          if (res.data.code == "0000") {
            this.$router.go(-1);
          }else{
            layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //2秒后自动关闭
          });
          }
        });
      }
      
    },
    cancel() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.content {
  min-width: calc(100% - 40px);
  position: relative;
}
.basicInfo {
  width: calc(100% - 40px);
  margin: 20px;
  height: 40px;
  margin-left: 0px;
  line-height: 40px;
  margin-bottom: 5px;
  /* padding-left: 20px; */
  font-size: 18px;
  float: left;
}
.basicInfo2 {
  width: calc(100% - 40px);
  margin: 20px;
  height: 40px;
  margin-left: 0px;
  margin-bottom: 5px;
  line-height: 40px;
  padding-left: 20px;
  font-size: 18px;
  float: left;
 
}
.basicInfo1 {
  min-width: calc(100% - 40px);
  margin-left: 20px;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  background: #f1f4fa;
  float: left;
  display: flex;
  padding-top: 16px;
}
.grade {
  padding: 20px;
  min-height: 100%;
}
.title_son {
  width: 128px;
  float: left;
  display: flex;
  line-height: 50px;
}
.title_son1 {
  width: 210px;
  float: left;
  display: flex;
  line-height: 50px;
}
.title_son2 {
  display: flex;
  width: 150px;
  float: left;
  line-height: 50px;
}
.title_con {
  background: #f1f4fa;
  width: 100%;
  min-width: 1250px;
  /* min-width: calc(100% - 40px); */
  min-height: 20px;
  float: left;
  padding: 20px;
  margin-bottom: 30px;
}
.inputs {
  width: 100px;
}
/deep/ .inputs .el-input__inner {
  width: 100px;
}
.inputs1 {
  width: 150px;
}
/deep/ .inputs1 .el-input__inner {
  width: 150px;
}
.add {
  cursor: pointer;
  color: #409eff;
}
.add2 {
  cursor: pointer;
  color: #409eff;
  margin-left: 20px;
  font-size: 20px;
}
.list {
  height: 42px;
  float: left;
  /* display: flex; */
  /* float: left; */
  /* list */
  /* width: 500px */
  /* display: flex;
  height: 50px; */
}
.lists {
  width: 560px;
  float: left;
}
#active {
  /* margin-left: 128px !important; */
}
/* .title_con:last-child{
  border-bottom: 0px !important
} */
</style>
